<div class="userinfo">
    <div class="icon">
        <img src="../public/all/images/phone/avatar.png"/>
    </div>
    <div class="userdetail">
        欢迎您！<span class="name">--</span> <br/>
        <span class="line2">
            积分余额：<span class="red">  </span>
        </span>
    </div>
    <div class="clear"></div>
</div>

<div class="tabs">
    <ul class="am-avg-sm-3">
        <li class="bank">银行卡</li>
        <li class="wechat">微信</li>
        <li class="alipay">支付宝</li>
    </ul>
</div>

<!-- 银行卡 -->
<div class="bank-c">
    <div class="common_item">
        <table class="with-title-input">
            <tr>
                <td class="title">开户行</td>
                <td class="input">
                    <input type="text" class="am-form-field bank" placeholder="请填写开户行" />
                </td>
            </tr>
        </table>
    </div>
    <div class="common_item">
        <table class="with-title-input">
            <tr>
                <td class="title">卡号</td>
                <td class="input">
                    <input type="number" class="am-form-field account" placeholder="请填写银行卡号" />
                </td>
            </tr>
        </table>
    </div>
    <div class="common_item">
        <table class="with-title-input">
            <tr>
                <td class="title">开户地</td>
                <td class="input">
                    <input type="text" class="am-form-field addr" placeholder="请填写开户城市" />
                </td>
            </tr>
        </table>
    </div>
    <div style="margin: 15px;">
        <button type="button" class="btn-bank common_button">确认提交</button>
    </div>
</div>

<div class="wechat-c">
    <div class="common_item">
        <table class="with-title-input">
            <tr>
                <td class="title">微信账号</td>
                <td class="input">
                    <input type="text" class="am-form-field account" placeholder="请填写微信账号名" />
                </td>
            </tr>
        </table>
    </div>

    <div class="common_item" style="height: auto;">
        <table class="with-title-input">
            <tr>
                <td class="title">二维码</td>
                <td class="input">
                    <img src="" class="icon"/>
                    <input type="file" class="icon" data-url="/tephra/ctrl-http/upload" multiple>
                </td>
            </tr>
        </table>
    </div>

    <div style="margin: 15px;">
        <button type="button" class="btn-wechat common_button">确认提交</button>
    </div>
</div>

<div class="alipay-c">
    <div class="common_item">
        <table class="with-title-input">
            <tr>
                <td class="title">账号</td>
                <td class="input">
                    <input type="text" class="am-form-field account" placeholder="请填写微信账号名" />
                </td>
            </tr>
        </table>
    </div>
    
    <div class="common_item">
        <table class="with-title-input">
            <tr>
                <td class="title">认证名字</td>
                <td class="input">
                    <input type="text" class="am-form-field name" placeholder="请填写支付认证实名" />
                </td>
            </tr>
        </table>
    </div>

    <div class="common_item" style="height: auto;">
        <table class="with-title-input">
            <tr>
                <td class="title">二维码</td>
                <td class="input">
                    <img src="" class="icon"/>
                    <input type="file" class="icon" data-url="/tephra/ctrl-http/upload" multiple>
                </td>
            </tr>
        </table>
    </div>

    <div style="margin: 15px;">
        <button type="button" class="btn-alipay common_button">确认提交</button>
    </div>
</div>

<style type="text/css">
    body {
        background-color: #eeeeee;
    }
    .userinfo {
        height: 80px;
        border-top: 1px solid #b8b8b8;
        border-bottom: 1px solid #b8b8b8;
        color: #000;
        font-weight: bold;
    }
    .userinfo .icon {
        float: left;
        width: 90px;
        text-align: right;
        padding-top: 10px;
    }
    .userinfo .icon img {
        width: 60px;
        height: 60px;
        border-radius: 50%;
    }
    .userinfo .userdetail {
        float: left;
        margin-left: 10px;
        margin-top: 15px;
    }
    .userinfo .userdetail .line2 {
        font-size: 14px;
        color: #838383;
    }

    .mobile td {
        background-color: #fff;
    }
    .common_button { margin: 0px; }
    .input img.icon {
        width: 150px;
        height: 150px;
        border: 1p solid #ccc;
    }
    .input .icon {
        margin: 5px 0px 5px 0px;
    }
    input.icon {
        width: 200px;
    }
</style>

<script>
    $(".bank-c").hide();
    $(".wechat-c").hide();
    $(".alipay-c").hide();
    var n = urlInfo.params.n;
    if (n == 'wechat') {
        $(".wechat-c").show();
        $(".tabs .wechat").attr("class", "wechat active");
    }
    else if (n == 'alipay') {
        $(".alipay-c").show();
        $(".tabs .alipay").attr("class", "alipay active");
    }
    else {
        n = 'bank';
        $(".tabs .bank").attr("class", "bank active");
        $(".bank-c").show();
    }

    function fillUserInfo() {
        var user = context.user.user;
        $(".userinfo .icon img").attr("src", user.portrait);
        $(".userinfo .name").html(user.nick || user.mobile);
    }
    ME.query(function() {
        fillUserInfo();
        fillBank();
        fillWechat();
        fillAlipay();

        GroupUtil.init(true, function(group) {
            $(".userinfo .line2 .red").html((GroupUtil.account.balance/100).toFixed(2));
        });
    });

    // tab标签切换
    $(".tabs .bank").click(function() {
        Util.jumpUrl({
            n: "bank",
        });
    });
    $(".tabs .wechat").click(function() {
        Util.jumpUrl({
            n: "wechat",
        });
    });
    $(".tabs .alipay").click(function() {
        Util.jumpUrl({
            n: "alipay",
        });
    });

    // 填充银行卡信息
    function fillBank() {
        var user = context.user.user;
        if (user.bank) {
            var b = JSON.parse(user.bank);
            $(".bank-c .bank").val(b.bank || '');
            $(".bank-c .addr").val(b.addr || '');
            $(".bank-c .account").val(b.account || '');
        }
    }

    // 填充微信信息
    function fillWechat() {
        var user = context.user.user;
        if (user.wechatCharge) {
            var b = JSON.parse(user.wechatCharge);
            $(".wechat-c .account").val(b.account || '');
            $(".wechat-c img.icon").attr("src", b.qrcode || '');
        }
    }

    // 填充支付宝信息
    function fillAlipay() {
        var user = context.user.user;
        if (user.alipayCharge) {
            var b = JSON.parse(user.alipayCharge);
            $(".alipay-c .account").val(b.account || '');
            $(".alipay-c .name").val(b.name || '');
            $(".alipay-c img.icon").attr("src", b.qrcode || '');
        }
    }

    $(".bank-c button").click(function() {
        var b = {};
        b.bank = $(".bank-c .bank").val().trim();
        b.addr = $(".bank-c .addr").val().trim();
        b.account = $(".bank-c .account").val();
        if (!b.bank) {
            alert2("请输入银行名称"); return;
        }
        if (!b.addr) {
            alert2("请输入卡户地址"); return;
        }
        if (!b.account) {
            alert2("请输入银行卡号"); return;
        }

        CMD.modify_user_info(context.user.user.id, {
            bank: JSON.stringify(b),
        }, function() {
            alert2("保存成功");
        });
    });

    // 微信二维码
    $(".wechat-c input.icon").change(function() {
        var data = new FormData();
        var file = $(".wechat-c input.icon")[0].files[0];
        if (file.size > 200 * 1024) {
            alert2("二维码大小必须小于200K！");
            return;
        }
        data.append("eddy.message.image", $(".wechat-c input.icon")[0].files[0]);
        
        CMD.upload(data, null, function(r) {
            alert2("二维码上传成功");
            $(".wechat-c img.icon").attr("src", r);
        });
    });

    $(".wechat-c button").click(function() {
        var b = {};
        b.qrcode = $(".wechat-c img.icon").attr("src");
        b.account = $(".wechat-c .account").val();
        if (!b.account) {
            alert2("请输入微信账号名称"); return;
        }

        CMD.modify_user_info(context.user.user.id, {
            wechatCharge: JSON.stringify(b),
        }, function() {
            alert2("保存成功");
        });
    });

    // 支付宝二维码
    $(".alipay-c input.icon").change(function() {
        var data = new FormData();
        var file = $(".alipay-c input.icon")[0].files[0];
        if (file.size > 200 * 1024) {
            alert2("二维码大小必须小于200K！");
            return;
        }
        data.append("eddy.message.image", $(".alipay-c input.icon")[0].files[0]);
        
        CMD.upload(data, null, function(r) {
            alert2("二维码上传成功");
            $(".alipay-c img.icon").attr("src", r);
        });
    });

    $(".alipay-c button").click(function() {
        var b = {};
        b.qrcode = $(".alipay-c img.icon").attr("src");
        b.account = $(".alipay-c .account").val();
        b.name = $(".alipay-c .name").val();
        if (!b.account) {
            alert2("请输入支付宝账号名称"); return;
        }
        if (!b.name) {
            alert2("请输入支付宝认证名字"); return;
        }

        CMD.modify_user_info(context.user.user.id, {
            alipayCharge: JSON.stringify(b),
        }, function() {
            alert2("保存成功");
        });
    });
</script>